<template>
  <div style="display: flex">
    <img :src="imgurl" id="cbRemark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
    <div v-show="seen" id="bont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <li>风险指数=未解决高风险数*1+未解决中风险数*0.5+未解决低风险数*0.2</li>
      </div>
    </div>
    <div class="centerBottom" style="width: 4rem;height: 5rem">
      <radar id="radar" :cdata="cdata" style="width: 4rem;height: 5rem"/>
      <!-- <dv-scroll-board id="scroll" :config="config" style="font-size:0.25rem width:8rem;height:5rem"/> -->
    </div>
    <div style="padding-top: 1rem; width:8rem;height:5rem">
      <dv-scroll-board id="scroll" :config="config"/>
    </div>
  </div>

</template>

<script>
import radar from '@/components/radar'
import img from '../assets/remark.png'

var risk = {"qualityRisk": 0,
"detail": [{"risktype": "\u884c\u4e3a\u98ce\u9669", "mainChargeUserName": "\u6797\u5fd7\u658c", "affectLevel": "HIGH", "riskStatus": "CLOSED", "riskContent": "JDM\u5382\u5546\u751f\u4ea7\u6d4b\u8bd5\u6267\u884c\u60c5\u51b5"}, {"risktype": "\u5176\u4ed6\u98ce\u9669", "mainChargeUserName": "\u674e\u4e0a\u798f", "affectLevel": "", "riskStatus": "CLOSED", "riskContent": "\u5f3a\u5173\u8054\u9879\u76ee[OPS-V-I5V1]\u955c\u50cf\u66f4\u65b0"}, {"risktype": "\u5176\u4ed6\u98ce\u9669", "mainChargeUserName": "\u674e\u4e0a\u798f", "affectLevel": "", "riskStatus": "CLOSED", "riskContent": "\u5f3a\u5173\u8054\u9879\u76ee[OPS-V-I5V1]\u955c\u50cf\u66f4\u65b0"}],
 "technologyRisk": 0, "behaviorRisk": 1, "processRisk": 0, "otherRisk": 1.0}
var risk = {}
export default {
  data() {
    return {
      imgurl:img,
      seen:false,
      drawTiming: null,
      cdata: {
      },
      startValue:200,
      // risk:[],
      config: {
        // header: ['风险类型', '负责人', '风险等级','风险状态','风险详情'],
        header:["<span style='font-size:14px;'>风险类型</span>",
        "<span style='font-size:14px;'>负责人</span>",
        "<span style='font-size:14px;'>风险等级</span>",
        "<span style='font-size:14px;'>风险状态</span>",
        "<span style='font-size:14px;'>风险详情</span>"],
        headerBGC:'#21618C',
        // data: [
        //   ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
        //   ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
        //   ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
        //   ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
        //   ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
        //   ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
        //   ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
        //   ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
        //   ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
        //   ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
        // ],
        // index: true,
        data: [],
        // data:this.getRiskDetail()
        columnWidth: [80,80,80,80,],
        // align: ['center'],
      }
    }
  },
  components: {
    radar,
  },
  mounted() {
    this.getriskdetail()
  },
  methods: {
    getriskdetail(){
        this.$http({ method: 'get',
                    url: 'show/risk/?system='+this.$global.system,}).then(response => {
                    // console.log(response.data);
              var riskdata = {}
              for (var risk in response.data){
                    riskdata[risk] = response.data[risk]
              }
              // console.log(riskdata)
              this.cdata = riskdata
              var details = []
              for (var bug in response.data.detail) {
                var oneBug = []
                for (var b in response.data.detail[bug]) {
                  oneBug.push("<span style='font-size:14px;'>"+response.data.detail[bug][b]+"</span>")
                }
                details.push(
                    oneBug
                )
              }
              // return details
              // console.log(details)
              this.config.data = details
              this.config={...this.config}
                },
                );
    },
    onMouseOver() {
      this.seen=true
    },
    onMouseOut() {
      this.seen=false
    },
  }
}


</script>

<style lang="scss" scoped>
.centerBottom{
  // padding-top: 0.2rem;
  #radar{
    // padding-top: 0.2rem;
    position: fixed;  // 浮动
    z-index: 999999;
  }
  #scroll{
    padding-left: 4rem;
    padding-top: 2rem;
    #header{
      font-size: 1;
    }
  }
  // .dv-scroll-board{
    
  // }
}
#cbRemark{
  //float: right;
  position: fixed;
  z-index: 99999999;
  //padding-top: 1rem;
  margin-left: 11.2rem;
  width: 20pt;
  height: 20pt;
}
#bont{
  width: 8rem;
  height: .5rem;
  //background-color:#171823;
  margin-top: 0.25rem;
  margin-left: 3.3rem;
  color:#CCFFFF;
  //box-shadow: #5f5f5f;
  background: rgba(64,64,64,.5);
  //li{ line-height:0.35rem}
  li:before {
    content: "";
    width: 6pt;
    height: 6pt;
    display: inline-block;
    border-radius: 50%;
    background: #4F8EFF;
    vertical-align: middle;
    margin-right: 5pt;
  }
}
</style>